<template>
  <card :title="feeOption.feeName" :showDivider="showDivider">
    <page-form-row>
      <!-- 详细费用 -->
      <template v-for="(feeDetailItem, feeDetailIndex) in feeOption.childrenList" :key="feeDetailIndex">
        <page-form-item :label="feeDetailItem.showItemName || feeDetailItem.itemName" size="1/2">
          <i-input-number v-model="feeDetailItem.amount" />
        </page-form-item>
      </template>
      <page-form-item label="赔款原因" size="1/2">
        <sysdict-select v-model="feeOption.compensateReason" code="short_order_compensate_reason" />
      </page-form-item>
      <!-- 存在 feeOption.remarkLabel 显示备注录入 -->
      <page-form-item v-if="feeOption.remarkLabel" class="mb-0" :label="feeOption.remarkLabel" size="1">
        <i-input v-model="feeOption.remark" :max-length="200" />
      </page-form-item>
    </page-form-row>
  </card>
</template>
<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    index: Number,
    list: Array,
    requiredKey: String,
    showDivider: {
      type: Boolean,
      default: true,
    },
  })

  const feeOption = computed(() => {
    return props.list[props.index]
  })
</script>
